<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" class="demo-form-inline" :data="params">
        <el-form-item label="车牌号码：" prop="carNumber">
          <el-input v-model="params.carNumber" placeholder="请输入车牌号码" />
        </el-form-item>

        <el-form-item label="缴纳状态：" prop="paymentStatus">
          <el-select v-model="params.paymentStatus" placeholder="未选择">
            <el-option
              v-for="item in paymentStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表单区域 -->
    <el-table
      ref="multipleTable"
      :data="carPayList"
      tooltip-effect="dark"
      style="width: 100%"
    >

      <el-table-column type="index" label="序号" width="120" />

      <el-table-column prop="carNumber" label="车牌号码" width="120" />
      <el-table-column
        prop="chargeType"
        label="收费类型"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ formatPayMethodStatus(scope.row.chargeType) }}
        </template></el-table-column>
      <el-table-column
        prop="parkingTime"
        label="停车总时长"
        show-overflow-tooltip
      />
      <el-table-column prop="actualCharge" label="缴纳费用(元)" show-overflow-tooltip />
      <el-table-column
        prop="paymentStatus"
        label="缴纳状态"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ formatPayStatus(scope.row.paymentStatus) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="paymentMethod"
        label="缴纳方式"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ formatPaymentMethod(scope.row.paymentMethod) }}
        </template>

      </el-table-column>
      <el-table-column label="缴纳时间" prop="paymentTime" />
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :page-size="params.pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getCarPayAPI } from '@/api/carPay'
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
        carNumber: '',
        paymentStatus: ''
      },
      carPayList: [],
      paymentStatusList: [
        { value: 0, label: '已缴纳' },
        { value: 1, label: '待缴纳' },
        { value: null, label: '全部' }
      ],
      total: 0

    }
  },
  mounted() {
    this.getCarPayList()
  },
  methods: {
    async getCarPayList() {
      const res = await getCarPayAPI(this.params)
      console.log(res)
      this.carPayList = res.data.rows
      this.total = res.data.total
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.getCarPayList()
    },
    // 搜索功能
    doSearch() {
      this.params.page = 1
      this.getCarPayList()
    },
    // 缴纳状态转换
    formatPayStatus(chargetType) {
      const MAP = {
        0: '未缴纳',
        1: '已缴纳'
      }
      return MAP[chargetType]
    },
    // 收费类型转换
    formatPayMethodStatus(chargetType) {
      const MAP = {
        card: '月卡',
        temp: '临时'
      }
      return MAP[chargetType]
    },
    // 支付方式转换
    formatPaymentMethod(chargetType) {
      const MAP = {
        Alipay: '支付宝',
        WeChat: '微信',
        Cash: '线下',
        null: '----'

      }
      return MAP[chargetType]
    }

  }
}
</script>

<style></style>
